import 'package:boss/color_constant.dart';
import 'package:boss/provider/binding_provider.dart';
import 'package:boss/textStyle/text_style.dart';
import 'package:boss/ui/page/binding/model/reviewPayInfoStatus.dart';
import 'package:boss/ui/widget/image/base_image.dart';
import 'package:boss/ui/widget/shadow_radius_card.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:hi_common/hi_common.dart';
import 'package:provider/provider.dart';
import 'package:router/annotation.dart';

@RouterConfig(PayConfigurationPage.pageName)
class PayConfigurationPage extends StatefulWidget {
  static const pageName = '/PayConfigurationPage';

  @override
  _PayConfigurationPageState createState() => _PayConfigurationPageState();
}

class _PayConfigurationPageState extends BaseState<PayConfigurationPage> {
  _PayConfigurationPageState() : super(PayConfigurationPage.pageName);

  List<_PayTypeData> payTypes = [
    _PayTypeData('assets/image/pay_wechat.png', '微信', '开通：仅开通微信', '开通费率：0.38%~0.6%，开通时长1~5个工作日'),
    _PayTypeData('assets/image/pay_al.png', '支付宝', '开通：仅开通支付宝', '开通费率：0.38%~0.6%，开通时长1~2个工作日'),
  ];

  @override
  Widget build(BuildContext context) {
    final safeTop = MediaQuery.of(context).padding.top;

    return AnnotatedRegion(
      value: SystemUiOverlayStyle.light,
      child: Scaffold(
        body: Consumer<BindingProvider>(
          builder: (context, provider, child) {
            return Column(
              children: [
                Container(
                  height: 310.w + safeTop,
                  padding: EdgeInsets.only(top: safeTop),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage('assets/image/pay_config_header_bg.png'),
                      fit: BoxFit.fitHeight,
                    ),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      GestureDetector(
                        onTap: () {
                          Navigator.pop(context);
                        },
                        behavior: HitTestBehavior.translucent,
                        child: Container(
                          padding: EdgeInsets.only(
                            left: 30.w,
                            right: 30.w,
                            top: 30.w,
                            bottom: 10.w,
                          ),
                          alignment: Alignment.centerLeft,
                          child: BaseImage(
                            'assets/image/arrow_left_icon.png',
                            width: 16.w,
                            height: 34.w,
                            color: Colors.white,
                          ),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 80.w, bottom: 20.w, top: 30.w),
                        child: Text('移动支付开通', style: TextStyleConstant().white_36.copyWith(fontWeight: FontWeight.w500)),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 80.w),
                        child: Text('学习强店为您和顾客提供安全便捷的移动端支付方案', style: TextStyleConstant().white_24.copyWith(fontWeight: FontWeight.w500)),
                      ),
                    ],
                  ),
                ),
                _PayTypeRow(payTypes[0], provider.wechatHistory?.applyStatus == ReviewPayInfoStatus.FINISH),
                _PayTypeRow(payTypes[1], provider.alipayHistory?.applyStatus == ReviewPayInfoStatus.FINISH),
              ],
            );
          },
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();

    Provider.of<BindingProvider>(context, listen: false).initData();
  }
}

class _PayTypeData {
  String icon;
  String title;
  String subTitle;
  String desc;

  _PayTypeData(this.icon, this.title, this.subTitle, this.desc);
}

class _PayTypeRow extends StatelessWidget {
  final _PayTypeData data;
  final bool isOpened;

  const _PayTypeRow(this.data, this.isOpened, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ShadowRadiusCard(
      height: 180.w,
      margin: EdgeInsets.only(top: 30.w, left: 20.w, right: 20.w),
      padding: EdgeInsets.all(30.w),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.only(right: 35.w),
            child: BaseImage(
              data.icon,
              width: 76.w,
              height: 76.w,
            ),
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(data.title, style: TextStyleConstant().normal_1_34),
                    Container(
                      width: 120.w,
                      height: 40.w,
                      decoration: BoxDecoration(
                        color: (isOpened ? ColorConstant.ff5770f6 : ColorConstant.fe7f76).withOpacity(0.1),
                        borderRadius: BorderRadius.circular(20.w),
                      ),
                      alignment: Alignment.center,
                      child: Text(isOpened ? '已开通' : '未开通', style: isOpened ? TextStyleConstant().blue_24 : TextStyleConstant().origin_24),
                    ),
                  ],
                ),
                Text(data.subTitle, style: TextStyleConstant().normal_1_24),
                Text(data.desc, style: TextStyleConstant().normal_3_22),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
